<template>
  <div>
    <deri-header></deri-header>
    <div
      style="background: #fff; padding: 20px;margin-top: 80px;overflow: hidden;overflow-y: scroll;"
    >
      <div style="width: 80%;margin-left: 10%;">
        <h3 class="flex-between header">
          <div class="fun-name">{{ funDetail.funName }}</div>
          <div class="flex-center">
            <img
              @click="doLikeFun"
              title="收藏"
              v-if="!liked"
              src="../assets/images/未收藏.svg"
              alt=""
            />
            <img
              @click="doLikeFun"
              title="取消收藏"
              v-if="liked"
              src="../assets/images/收藏.svg"
              alt=""
            />
            <img
              @click="buyTicket"
              title="买票"
              src="../assets/images/门票.svg"
              alt=""
            />
            <div class="dp-btn cp" @click="toComment">我要点评</div>
          </div>
        </h3>
        <el-carousel height="500px" style="margin-top: 10px;">
          <el-carousel-item v-for="item in funDetail.pics" :key="item.img">
            <div style="position: relative;">
              <img
                ref="img"
                style="width: 100%;height: 500px;"
                :src="item"
                alt=""
              />
            </div>
          </el-carousel-item>
        </el-carousel>

        <div class="desc">{{ funDetail.funDesc }}</div>
        <div class="comments">
          <div
            class="each-comment"
            v-for="(c, i) in funDetail.comments"
            :key="i"
          >
            <div class="creator">{{ c.creator }}:</div>
            <div class="comment2">{{ c.comment }}</div>
            <div class="time">{{ c.createTime }}</div>
          </div>
        </div>
        <div class="my-comment flex-center" style="gap: 20px;">
          <el-input
            class="input"
            v-model="input"
            placeholder="请输入评论"
          ></el-input>
          <div class="dp-btn cp" style="width: 90px;" @click="addComment">
            发布
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="买票"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div class="price">
        <div class="flex-center" v-if="userInfo.type === '会员'">
          <div class="price-font">会员价</div>
          <div class="old-price">{{funDetail.price}}</div>
          <div class="vip-price">{{funDetail.priceVip}}</div>
        </div>
        <div class="flex-center" v-if="userInfo.type !== '会员'">
          <div class="price-font">票价</div>
          <div class="vip-price">{{funDetail.price}}</div>
        </div>
      </div>
      <div class="flex-center">
        <div class="mr10">选择时间</div>
        <el-date-picker
          v-model="date"
          class="mr10"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <div class="mr10">选择数量</div>
        <el-input-number
          v-model="count"
          :min="1"
          :max="10"
          label="数量"
        ></el-input-number>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doBuy">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import {
  getJob,
  // getJobById,
  // updateJobParams,
  updateUser,
  updateJob,
  getUserInfo,
} from "../service";
export default {
  data() {
    return {
      userInfo: {},
      funDetail: {},
      input: "",
      liked: false, // 是否已经收藏
      dialogVisible: false,
      date: "",
      count: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 1000 * 86400;
        },
      },
    };
  },
  created() {
    let ls = localStorage.getItem("meiyaWebInfo");
    if (ls) {
      this.userInfo = JSON.parse(ls);
      getUserInfo(this.userInfo._id).then((res) => {
        this.userInfo = {
          ...res.data,
        };
      });
    }
    let funId;
    if (this.$route.params.id) {
      funId = this.$route.params.id;
    } else if (localStorage.getItem("meiyaFunDetail")) {
      funId = JSON.parse(localStorage.getItem("meiyaFunDetail")).id;
    } else {
      this.$router.push("/list");
    }
    this.funId = funId;
    this.getFunDetail();
  },
  methods: {
    getFunDetail() {
      // getJobById(this.funId).then((res) => {
      //   console.log(res);
      //   res.data.comments = JSON.parse(res.data.comments);
      //   res.data.likes = JSON.parse(res.data.likes);
      //   res.data.tickets = JSON.parse(res.data.tickets);
      //   res.data.pics = res.data.pics.split(",");
      //   this.funDetail = res.data;
      //   // 判断是否关注
      //   if (res.data.likes.includes(this.userInfo._id)) {
      //     this.liked = true;
      //   }
      // });
    },
    addComment() {
      if (!this.userInfo.username) {
        this.$notify({
          title: "提示",
          message: "请先登录",
          duration: 0,
        });
        return;
      }
      let params = {
        createTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        creator: JSON.parse(localStorage.getItem("meiyaWebInfo")).username,
        comment: this.input,
      };
      this.funDetail.comments.push(params);
      // 调编辑接口
      // updateJobParams(this.funDetail._id, {
      //   comments: JSON.stringify(this.funDetail.comments),
      // }).then((res) => {
      //   if (res.code === 200) {
      //     this.$message.success("评论成功");
      //     // 修改个人信息的comments
      //     let comments = JSON.parse(this.userInfo.comments);
      //     comments.push({
      //       funName: this.funDetail.funName,
      //       comment: this.input,
      //       time: moment().format("YYYY-MM-DD HH:mm:ss"),
      //     })
      //     updateUser(this.userInfo._id, {
      //       comments: JSON.stringify(comments),
      //     }).then((res) => {
      //       console.log(111);
      //     });
      //     this.input = "";
      //     this.getFunDetail();
      //   } else {
      //     this.$message.success("出错了");
      //   }
      // });
    },
    // 收藏或取消收藏
    doLikeFun() {
      if (!this.userInfo.username) {
        this.$notify({
          title: "提示",
          message: "请先登录",
          duration: 0,
        });
        return;
      }
      let stars = JSON.parse(this.userInfo.stars);
      if (this.liked) {
        // 取消收藏
        let index = this.funDetail.likes.findIndex(
          (v) => v === this.userInfo._id
        );
        let idx = stars.findIndex((v) => v.funId === this.funId);
        this.funDetail.likes.splice(index, 1);
        stars.splice(idx, 1);
      } else {
        this.funDetail.likes.push(this.userInfo._id);
        stars.push({
          funId: this.funId,
          funName: this.funDetail.funName,
          pic: this.funDetail.pics[0],
        });
      }
      this.funDetail.likes = [...new Set(this.funDetail.likes)];
      // 调修改接口
      updateJobParams(this.funDetail._id, {
        likes: JSON.stringify(this.funDetail.likes),
      }).then((res) => {
        if (res.code === 200) {
          if (!this.liked) {
            this.$message.success("收藏成功");
          } else {
            this.$message.info("取消收藏");
          }
          this.liked = !this.liked;
          this.getFunDetail();
        } else {
          this.$message.success("出错了");
        }
      });
      updateUser(this.userInfo._id, {
        stars: JSON.stringify(stars),
      }).then((res) => {
      });
    },
    toComment() {
      window.scrollTo(0, document.documentElement.scrollHeight);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    buyTicket() {
      if (!this.userInfo.username) {
        this.$notify({
          title: "提示",
          message: "请先登录",
          duration: 0,
        });
        return;
      }
      console.log(this.funDetail)
      console.log(this.userInfo)
      this.date = "";
      this.count = 1;
      this.dialogVisible = true;
    },
    doBuy() {
      if (!this.date) {
        this.$message.error("请选择日期");
        return;
      }
      let tickets = {
        userId: JSON.parse(localStorage.getItem("meiyaWebInfo"))._id,
        date: moment(this.date).format("YYYY-MM-DD"),
        count: this.count,
      };
      this.funDetail.tickets.push(tickets)
      // 1 修改fun
      updateJobParams(this.funDetail._id, {
        tickets: JSON.stringify(this.funDetail.tickets),
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("购买成功");
          this.dialogVisible = false
        } else {
          this.$message.success("出错了");
        }
      });

      let userInfoTickets = JSON.parse(this.userInfo.tickets)
      userInfoTickets.push({
        data: moment(this.date).format("YYYY-MM-DD"),
        count: this.count,
        price: this.userInfo.type === '会员' ? this.funDetail.priceVip : this.funDetail.price,
        funId: this.funId,
        funName: this.funDetail.funName,
        pic: this.funDetail.pics[0],
        buyTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      })
      updateUser(this.userInfo._id, {
        tickets: JSON.stringify(userInfoTickets),
      }).then((res) => {
      });
    },
  },
};
</script>

<style lang="scss" scoped>
h4 {
  text-align: center;
  font-weight: bold;
}

.name {
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
}
.desc {
  margin-top: 20px;
  overflow: hidden;
  color: #666;
  text-indent:24px;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  word-break: break-all;
  line-height: 24px;
  font-size: 16px;
  border-bottom: 1px solid #efd4d4;
  padding-bottom: 30px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-center {
  display: flex;
  align-items: center;
}

.cp {
  cursor: pointer;
}

.comments {
  display: flex;
  flex-wrap: wrap;

  .each-comment {
    width: 100%;
    margin-top: 8px;
    border-bottom: 1px dashed #dedede;
    padding: 0px 0 10px 20px;
  }
}

.my-comment {
  background: #f1e1d1;
  padding: 12px;
  width: 100%;
  margin-top: 20px;

  .input {
    width: calc(100% - 100px);
  }
}
.fun-name {
  color: #4a4338;
}
.creator {
  color: #4a4338;
  font-weight: bold;
  font-size: 16px;
}
.comment2 {
  color: #666;
  line-height: 22px;
}
.time {
  font-size: 12px;
  color: #999;
}
.header {
  img {
    width: 30px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.dp-btn {
  display: inline-block;
  line-height: 35px;
  background-color: #4a4338;
  padding: 0 30px;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.mr10 {
  margin-right: 10px;
}

.price {
  margin-bottom: 10px;
  padding: 15px 20px;
  background-color: #f6f6f6;
  font-size: 12px;
  color: #999;
}
.old-price {
  color: gray;
  text-decoration: line-through;
  font-size: 14px;
}
.vip-price {
  font-size: 20px;
  color: #4a4338;
  margin-left: 10px;
  font-weight: bold;
}
.price-font {
  color: #333;
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
}
</style>
